<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function example1 () {
            let ele = document.querySelector("#chestnut");
            let rs = ele.parentNode;
            console.log(rs)
        }
        function example2 () {
            let ele = document.querySelector("#chestnut");
            let rs = ele.previousSibling;
            console.log(rs)
        }
        function example3 () {
            let ele = document.querySelector("#chestnut");
            let rs = ele.previousElementSibling;
            console.log(rs)
        }
        function example4 () {
            let ele = document.querySelector("#chestnut");
            let rs = ele.nextElementSibling;
            console.log(rs)
        }
        function example5 () {
            let ele = document.querySelector("#chestnut");
            let rs = ele.nextSibling;
            console.log(rs)
        }
        function example6 () {
            let ele = document.querySelector("ul");
            let rs = ele.childNodes;
            console.log(rs)
        }
        function example7 () {
            let ele = document.querySelector("#chestnut");
            let rs = ele.attributes;
            console.log(rs)
        }
        function example8 () {
            let ele = document.querySelector("ul");
            let rs = ele.firstChild;
            console.log(rs)
        }
        function example9 () {
            let ele = document.querySelector("ul");
            let rs = ele.firstElementChild;
            console.log(rs)
        }
        function example10 () {
            let ele = document.querySelector("ul");
            let rs = ele.lastElementChild;
            console.log(rs)
        }
        function example11 () {
            let ele = document.querySelector("ul");
            let rs = ele.lastChild;
            console.log(rs)
        }
    </script>
</head>
<body>
<div id="container" >
    <div>
        <a>超链接</a>
        <span>
            <ul>
                <li>糖炒栗子</li>
                <li id="chestnut" name="lizi">栗子</li>
                <li>烤红薯</li>
            </ul>
        </span>
        <span>
            <ul>
                <li>抽烟</li>
                <li>喝酒</li>
                <li>烫头</li>
            </ul>
        </span>
    </div>
    <div>
        <span>小黑胖子</span>
    </div>
</div>
<button onclick="example1()">parentNode</button>
<button onclick="example6()">childNodes</button><br/>
<button onclick="example2()">previousSibling</button>
<button onclick="example5()">nextSibling</button><br/>
<button onclick="example3()">previousElementSibling</button>
<button onclick="example4()">nextElementSibling</button><br/>
<button onclick="example8()">firstChild</button>
<button onclick="example9()">firstElementChild</button><br/>
<button onclick="example11()">lastChild</button>
<button onclick="example10()">lastElementChild </button><br/>
<button onclick="example7()">attributes</button>
</body>
</html>